<!-- serieslist\trakt-trending.html -->
<div class="series adding" series-grid="false" no-scroll max-posters="{{trending.limit}}" ng-class="{'miniposter': serieslist.isSmall}">
  <!-- no series, show intro text and trakt connect/ backup import -->
  <div ng-if="trending.noFavs" class="alert alert-info" style='margin:20px;text-align:left;white-space:normal;font-size: 14px;position: relative;'>
    <button type="button" class="close" ng-click="trending.noFavs = false" style="color: #000"><span>&times;</span></button>
    <strong translate-once>SERIESLIST/TRAKT-TRENDING/series-no/hdr</strong>
    <span translate-once>SERIESLIST/TRAKT-TRENDING/series-no/desc</span>
    <br>

    <button class="btn btn-primary" ng-click="showBackup = true; showTrakt = false" style='position:relative;' translate-once>SERIESLIST/TRAKT-TRENDING/import/btn</button>
    or
    <button class="btn btn-primary" ng-click="showTrakt = true;showBackup = false" translate-once>SERIESLIST/TRAKT-TRENDING/connect-to-traktTV/btn</button>

    <div ng-show="showTrakt == true" ng-include="'templates/settings/trakt-import.html'"></div>
    <div ng-show="showBackup == true" ng-include="'templates/settings/backup-import.html'"></div>
  </div>

  <h1 style='margin-bottom:15px;margin-top:15px;color:rgb(225,225,225);'><span translate-once>COMMON/addtrending/hdr</span> - <span translate-once>SERIESLIST/TRAKT-TRENDING/addtrending-help-click-to-show/hdr</span></h1>

  <!-- Trending series loading -->
  <h1 style='text-align:center' ng-show="trending.filtered.length == 0"><loading-spinner style="display: block; width: 37px; height: 37px; position: relative; margin: 0 auto;"></loading-spinner><br><span translate-once>SERIESLIST/TRAKT-TRENDING/addtrending-help-please-wait/hdr</span></h1>

  <div class="filters">
    <div ng-if="trending.getCategories().length > 0">
      <h3 translate-once>COMMON/genre/hdr</h3>
      <div>
        <button ng-repeat="category in trending.getCategories()" class="btn btn-xs btn-default" ng-click="trending.toggleCategory(category)" ng-class="{'active': trending.activeCategory == category}">{{::trending.translateCategory(category)}}</button>
      </div>
    </div>

    <div ng-if="trending.getStatuses().length > 0" style="width: 200px; margin-left: 10px;">
      <h3 translate-once>COMMON/status/hdr</h3>
      <div style="display: flex; flex-flow: column;">
        <button ng-repeat="status in trending.getStatuses()" class="btn btn-xs btn-default" styl="width: 100%" ng-click="trending.toggleStatus(status)" ng-class="{'active': trending.activeStatus == status}">{{::trending.translateStatus(status)}}</button>
      </div>
    </div>
  </div>

  <div class="series-grid" style="position:relative;width:100%;margin-top:10px">
    <!-- Repeated trending serie results -->
    <serieHeader ui-sref-active="active" ng-repeat="serie in filteredTrending = (trending.getFilteredResults()  | limitTo: trending.limit ) track by serie.trakt_id" data="serie" no-badge="1" no-overview="1" no-title="1" no-button="1" mode="poster" ui-sref="add_favorites.trakt-serie({ id: serie.trakt_id})">
      <em class="earmark add" ng-if="!serieslist.isAdded(serie.trakt_id) && !serieslist.isAdding(serie.trakt_id)" ng-click="serieslist.selectSerie(serie)">
        <i class="glyphicon glyphicon-plus"></i>
      </em>
      <em class="earmark trailer">
				<a ng-show="serie.trailer" href="{{serie.trailer}}" target="_blank" uib-tooltip="{{'COMMON/watch-trailer/tooltip'|translate}}" tooltip-append-to-body="true" stop-event tooltip-placement="bottom"><i class="glyphicon glyphicon-facetime-video"></i></a>
        <a ng-show="!serie.trailer" stop-event href="https://www.youtube.com/results?search_query={{serie.name}}+official+trailer" target="_blank" uib-tooltip="{{'COMMON/watch-trailer/tooltip'|translate}}" tooltip-append-to-body="true"  tooltip-placement="bottom"><i class="glyphicon glyphicon-facetime-video"></i></a>
      </em>
      <em class="earmark" ng-show="serieslist.isAdded(serie.trakt_id)"><i class='glyphicon glyphicon-ok'></i></em>
      <em class="earmark adding" ng-show="serieslist.isAdding(serie.trakt_id)"><loading-spinner style="width: 37px; height:37px"></loading-spinner></em>
      <em class="earmark error" ng-show="serieslist.isError(serie.trakt_id)" uib-tooltip="{{serieslist.error[serie.trakt_id]}}" tooltip-append-to-body="true"> :( </em>
    </serieHeader>
  </div>
  <button class="btn btn-info" ng-click="trending.limit = trending.limit + 75; trending.oldLimit = trending.limit" ng-show="trending.filtered && trending.limit < trending.filtered.length" style="margin:5px auto;width:50%;opacity:0.8">
    <i class="glyphicon glyphicon-plus"></i><span translate-once>SERIESLIST/TRAKT-TRENDING/show-more/btn</span>
  </button>
</div>
